<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true">
            <el-form-item label="时间" prop="date">
                <el-date-picker
                v-model="queryParams.examineTime"
                type="month"
                value-format="YYYY-MM"
                :clearable="false"
                />
            </el-form-item>
            <el-form-item label="绩效考核类型" prop="examineId">
                <el-select
                    v-model="queryParams.examineId"
                    placeholder="请选择绩效考核类型"
                    style="width: 200px"
                    >
                    <el-option
                        v-for="item in kpiTypeList"
                        :key="item.examineId"
                        :label="item.examineName"
                        :value="item.examineId"
                    />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
            </el-form-item>
        </el-form>
        <div class="kpi-box">
            <div class="kpi-box-left">
                <div id="kpiChart" class="chart-content"></div>
            </div>
            <div class="kpi-box-right">
                <el-select
                    v-model="serialNo"
                    placeholder="请选择指标序号"
                    style="width: 200px;margin-bottom: 20px;"
                    @change="getTableList()"
                    >
                    <el-option
                        v-for="item in serialNoList"
                        :key="item.serialNo"
                        :label="item.indicatorsName"
                        :value="item.serialNo"
                    />
                </el-select>
                <el-table
                    v-loading="loading"
                    :data="onlineList"
                    style="width: 100%;"
                >
                    <el-table-column label="排名" type="index" align="center" prop="ranking" :show-overflow-tooltip="true" width="50"></el-table-column>
                    <el-table-column label="员工姓名" align="center" prop="userName" :show-overflow-tooltip="true" />
                    <el-table-column label="绩效综合分" align="center" prop="score" :show-overflow-tooltip="true" />
                </el-table>
            </div>
        </div>
    </div>
</template>
<script setup>
import * as echarts from 'echarts';
import {onMounted, onUnmounted} from "vue";
import { getNameList, getIndicatorsList, getRanking } from "@/api/kpi/analyzeRanking.js";

const queryParams = ref({
    examineTime: '',
    examineId: ''
});
const kpiTypeList = ref([])
const serialNoList = ref([])
const loading = ref(false)
const onlineList = ref([])
const serialNo = ref(0)

onMounted(() => {
    getNameListData()
});

onUnmounted(() => {
    
});
function getNameListData () {
    getNameList().then( res => {
        if(res.code == 200 && res.data.length) {
            kpiTypeList.value = res.data;
            queryParams.value.examineId = res.data[0].examineId;
            handleQuery()
        }
    })
}
// 查询
function handleQuery(){
    let myEchart = echarts.init(document.getElementById('kpiChart'));
    let option = {
        title: {
            text: '绩效雷达图'
        },
        // legend: {
        //     data: []
        // },
        tooltip: {
            trigger: 'item'
        },  
        radar: {
            // shape: 'circle',
            center: ['50%', '50%'],//雷达图的中心位置
            radius: '50%',// 半径
            indicator: [
                {
                    name: ''
                }
            ]
        },
        series: [
            {
                name: '',
                type: 'radar',
                areaStyle: {},
                data: [
                    {
                        value: [],
                        name: '绩效雷达图'
                    }
                ]
            }
        ]
    }
    // 获取雷达图数据
    getIndicatorsList({
        examineTime: queryParams.value.examineTime,
        examineId: queryParams.value.examineId
    }).then( res => {
        if(res.code == 200 && res.data.length) {
            serialNoList.value = [{
                indicatorsName: '全部',
                serialNo: 0
            }, ...res.data];
            option.radar.indicator = []
            res.data.forEach(v => {
                option.radar.indicator.push(
                    {
                        name: v.indicatorsName
                    }
                )
                option.series[0].data[0].value.push(v.targetVal)
            })
            myEchart.setOption(option);
            getTableList()
        } else {
            myEchart.setOption(option)
            serialNoList.value = [{
                indicatorsName: '全部',
                serialNo: 0
            }];
            serialNo.value = 0
            getTableList()
        }
    })
    window.onresize = function () {
        myEchart.resize();
    };
}
function getTableList() {
    loading.value = true;
    getRanking(
        {
            examineTime: queryParams.value.examineTime,
            examineId: queryParams.value.examineId,
            serialNo: serialNo.value
        }
    ).then( res => {
        if(res.code == 200) {
            // 排行表格数据
            onlineList.value = res.data;
            loading.value = false;
        } else {
            loading.value = false;
        }
    })
}
//转换时间方法
function getDate(){
    var time = new Date(new Date().getTime());
    var year= time.getFullYear()  //年
    var month = ("0" + (time.getMonth() + 1)).slice(-2); //月
    var mydate = year + "-" + month;
    queryParams.value.examineTime = mydate
}
getDate()
</script>
<style lang="scss" scoped>
.app-container {
    .kpi-box {
        display: flex;
        .kpi-box-left {
            width: 60%;
            .chart-content {
                width: 100%;
                height: 100%;
            }
        }
        .kpi-box-right {
            width: 40%;
            height: 70vh;
        }
    }
}
</style>